<template>
	<view class="wui-stepBar">
		<block v-if="stepList.length">
			<view class="step-item" v-for="(step, index) in stepList" :key="index">
				<view class="step-line" :class="[current >= index ? 'step-line-active' : '']"
					:style="[activeColorComputed, defaultColorComputed]" v-if="index != 0">
					<text class="line"></text>
				</view>
				<view class="step-item-contet" :style="[activeColorComputed, defaultColorComputed]"
					:class="[current >= index ? 'step-item-contet-active' : '']">
					<view class="step-item-contet-icon iconfont" :style="[iconSizeComputed]" :class="[step.icon]">
					</view>
					<view class="step-item-contet-text" :style="[fontSizeComputed]">{{ step.text }}</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'w-stepBar',
		props: {
			current: {
				type: Number,
				default: 0
			},
			stepList: {
				type: Array,
				default: () => []
			},
			defaultColor: {
				type: String,
				default: '#8799A3'
			},
			activeColor: {
				type: String,
				default: '#E54D42'
			},
			iconSize: {
				type: String,
				default: '48'
			},
			fontSize: {
				type: String,
				default: '28'
			}
		},
		computed: {
			defaultColorComputed() {
				return {
					'--default-color': this.defaultColor
				};
			},
			activeColorComputed() {
				return {
					'--active-color': this.activeColor
				};
			},

			iconSizeComputed() {
				return {
					'--icon-size': uni.upx2px(this.iconSize) + 'px'
				};
			},
			fontSizeComputed() {
				return {
					'--font-size': uni.upx2px(this.fontSize) + 'px'
				};
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.wui-stepBar {
		display: flex;
		justify-content: center;
		height: 120rpx;
		padding: 20rpx 0;

		.step-item {
			display: flex;

			.step-item-contet {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: var(--default-color);

				.step-item-contet-icon {
					height: 60%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: var(--icon-size);
				}

				.step-item-contet-text {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: var(--font-size);
				}
			}

			.step-item-contet-active {
				color: var(--active-color);
			}

			.step-line {
				width: 100rpx;
				height: 60%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 10rpx;

				.line {
					position: relative;
					height: 4rpx;
					flex: 1;
					background-color: var(--default-color);
				}

				.line:after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 0;
					height: 100%;
					transition: width .5s;
					background-color: var(--default-color);
				}
			}

			.step-line-active {
				.line:after {
					width: 100%;
					background-color: var(--active-color);
				}
			}
		}
	}
</style>
